@value default-blue from 'canvas-editor/styles/theme';
@value default-light-gray from 'canvas-editor/styles/theme';

.canvas-block-title {
  composes: canvas-block from 'canvas-editor/components/canvas-block/styles';
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  position: relative;
}

.canvas-block-title::after {
  background: var(--light-gray, default-light-gray);
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  margin-top: 1rem;
  width: 10%;
}

.content {
  display: flex;
}

.title {
  flex: 1;
  line-height: 1.3333333;
}

.actions {
  margin-left: 1rem;
  margin-top: 0.6rem;
}

.suggestions {
  font-size: 0.875rem;
  position: relative;
}

.suggestions-content {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: white;
  padding: 0.25rem;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99999;
}

.template {
  padding: 0.25rem 0.5rem;
}

.template-is-selected {
  background: var(--blue, default-blue);
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.is-selected {
  composes: is-selected from 'canvas-editor/components/canvas-block/styles';
}
